import { toast } from "sonner";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/ui/card";

// 消息如春风化雨，提示似明月照心
export default function ToastPage() {
	const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: "诗韵" }), 2000));

	const handleSubmit = () => {
		toast.promise(promise, {
			loading: "加载中...",
			success: (data: any) => {
				return `${data.name} 消息已添加成功`;
			},
			error: "出现错误",
		});
	};
	return (
		<div className=" grid grid-cols-1 md:grid-cols-2 gap-4">
			<Card title="简单消息" className="flex-none text- lg:flex-1 bg-">
				<CardHeader>
					<CardTitle>简单消息</CardTitle>
				</CardHeader>
				<CardContent>
					<div className="flex flex-wrap gap-4">
						{/* 默认如素笺白纸，朴实无华见真章 */}
						<Button variant="outline" onClick={() => toast("默认消息", {})}>
							默认
						</Button>
						{/* 信息如春水润物，细致入微传心意 */}
						<Button
							variant="ghost"
							className="bg-info!"
							onClick={() =>
								toast.info("信息提示", {
									description: "这是一条详细的信息描述，如细雨润物无声般传达重要内容",
								})
							}
						>
							信息
						</Button>
						{/* 成功如花开富贵，喜悦之情溢于言表 */}
						<Button variant="ghost" className="bg-success!" onClick={() => toast.success("成功消息")}>
							成功
						</Button>
						{/* 警告如黄钟大吕，提醒世人需谨慎 */}
						<Button variant="ghost" className="bg-warning!" onClick={() => toast.warning("警告消息")}>
							警告
						</Button>
						{/* 错误如秋霜满地，严肃之意需重视 */}
						<Button variant="ghost" className="bg-error!" onClick={() => toast.error("错误消息")}>
							错误
						</Button>
					</div>
				</CardContent>
			</Card>
			{/* 操作如剑有双刃，确认取消两相宜 */}
			<Card title="带操作消息">
				<CardHeader>
					<CardTitle>带操作消息</CardTitle>
				</CardHeader>
				<CardContent>
					<div className="flex flex-wrap gap-4">
						<Button
							variant="outline"
							onClick={() =>
								toast("默认消息", {
									cancel: {
										label: "取消",
										onClick: () => {},
									},
									action: {
										label: "确认",
										onClick: () => {},
									},
								})
							}
						>
							默认
						</Button>
						<Button
							variant="ghost"
							className="bg-info!"
							onClick={() =>
								toast.info("信息提示", {
									action: {
										label: "确认",
										onClick: () => {},
									},
									cancel: {
										label: "取消",
										onClick: () => {},
									},
								})
							}
						>
							信息
						</Button>
						<Button
							variant="ghost"
							className="bg-success!"
							onClick={() =>
								toast.success("成功消息", {
									action: {
										label: "确认",
										onClick: () => {},
									},
									cancel: {
										label: "取消",
										onClick: () => {},
									},
								})
							}
						>
							成功
						</Button>
						<Button
							variant="ghost"
							className="bg-warning!"
							onClick={() =>
								toast.warning("警告消息", {
									action: {
										label: "确认",
										onClick: () => {},
									},
									cancel: {
										label: "取消",
										onClick: () => {},
									},
								})
							}
						>
							警告
						</Button>
						<Button
							variant="ghost"
							className="bg-error!"
							onClick={() =>
								toast.error("错误消息", {
									action: {
										label: "确认",
										onClick: () => {},
									},
									cancel: {
										label: "取消",
										onClick: () => {},
									},
								})
							}
						>
							错误
						</Button>
					</div>
				</CardContent>
			</Card>

			{/* 位置如八方来风，东西南北任君选 */}
			<Card title="位置设置">
				<CardHeader>
					<CardTitle>位置设置</CardTitle>
				</CardHeader>
				<CardContent>
					<div className="flex flex-wrap gap-4">
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "top-left" })}>
							左上
						</Button>
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "top-center" })}>
							上中
						</Button>
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "top-right" })}>
							右上
						</Button>
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "bottom-right" })}>
							右下
						</Button>
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "bottom-center" })}>
							下中
						</Button>
						<Button variant="outline" onClick={() => toast.info("信息消息", { position: "bottom-left" })}>
							左下
						</Button>
					</div>
				</CardContent>
			</Card>
			{/* 承诺如一诺千金，等待时光见真心 */}
			<Card title="异步承诺">
				<CardHeader>
					<CardTitle>异步承诺</CardTitle>
				</CardHeader>
				<CardContent>
					<Button variant="outline" onClick={handleSubmit}>
						提交处理
					</Button>
				</CardContent>
			</Card>
		</div>
	);
}
